<template>
	<div class="box">
		<el-table :data="tableData" stripe style="width: 100%" highlight-current-row>
			<el-table-column prop="avater" label="头像">
				<template #default="scope">
					<img class="avater" :src="scope.row.avater" alt="">
				</template>
			</el-table-column>
			<el-table-column prop="username" label="账号" />
			<el-table-column prop="nickname" label="昵称" />
			<el-table-column prop="email" label="邮箱" />
			<el-table-column prop="sex" label="性别" />
			<el-table-column prop="school" label="学校" />
			<el-table-column prop="address" label="地址" />
			<el-table-column prop="reg_time" label="注册时间">
				<template #default="scope">
					<div>{{ moment(scope.row.reg_time).format('YYYY-MM-DD HH:mm:ss') }}</div>
				</template>
			</el-table-column>
			<el-table-column prop="is_disabled" label="是否禁用">
				<template #default="scope">
					<el-switch v-model="scope.row.is_disabled" class="ml-2" inline-prompt
						style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y"
						inactive-text="N" @change="e => changestate(e, scope.row._id)" />
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="page" background layout="total, sizes, prev, pager, next" :page-sizes="[2,5,7]"
			:total="count" v-model:current-page="current" v-model:page-size="size"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import moment from "moment"
	import axios from '../../api/index.js';
	onMounted(() => {
		getUser()
	})

	let tableData = ref([])
	let count = ref(0)
	let current = ref(1)
	let size = ref(7)

	const handleEdit = (index, row) => {
		console.log(index, row)
	}
	const handleDelete = (index, row) => {
		console.log(index, row)
	}
	const changestate = (is_disabled, id) => {
		axios.patch("/zjb/updateuser/" + id, {
			is_disabled
		}).then(({
			data
		}) => {
			console.log(data);
		})
	}
	const getUser = () => {
		axios.get("/zjb/alluser/" + current.value + "/" + size.value).then(({
			data
		}) => {
			console.log(data);
			tableData.value = data.data
			count.value = data.count
		})
	}
	const handleSizeChange = (val) => {
		size.value = val
		getUser()
	}
	const handleCurrentChange = (val) => {
		current.value = val
		getUser()
	}
</script>

<style scoped>
	.avater {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.page {
		margin: 20px;
		float: right;
	}
</style>